<template>
<!--  <div>
    <header>
      <h2 class="title">{{ title }}
      </h2>
    </header>

      <div class="overflower">
         <el-collapse  accordion>
      <article v-for="article in articles">

  <el-collapse-item >
     <template slot="title">
      <el-tooltip class="item" effect="dark" content="点击查看全文" placement="top-start">
        <router-link :to="{ name:'ArticleShow', params: { id: article.id }}"><span class="head">博文主题:{{ article.get('title') }}</span></router-link>
    </el-tooltip>
     <el-tooltip class="item" effect="dark" content="查看博文列表！" placement="top-start">
       <router-link :to="{name: 'User', params: { id: article.get('author').id}}"><sapn class="head">(作者：{{ article.get('author').get('username') }})</sapn></router-link>
    </el-tooltip>
    </template>
    <div v-html="article.get('content')"  ></div>
  </el-collapse-item>


      </article>
      </el-collapse>
      </div>


  </div>-->

    <div class="home-container" ref="home">
      <div class="data-list">
        <div slot="item" class="flow" v-for="(article,index) in articles">
          <!--时间轴-->
          <router-link :to="{ name:'ArticleShow', params: { id: article.id }}" tag="div">
          <div class="flow-item">
            <div class="time-line">
              <div class="cycle" ></div>
              <div class="line"  v-bind:class="articles.length === index+1 ? 'last-line':''"></div>
            </div>
            <div class="flow-right">
              <div class="flow-time">{{article.get('createdAt')|formatTime}}</div>
              <div class="flow-men">
                <div class="men-info">
                  <router-link :to="{name: 'User', params: { id: article.get('author').id}}">
                  <span class="men-img" v-if="article.get('author').get('avatar')">
                  <img v-lazy="article.get('author').get('avatar')"  width="60" height="60" alt=""/>
                  </span>
                  <span class="men-img" v-else>
                 <i class="fa fa-user-circle-o  fa-4x" aria-hidden="true"></i>
                  </span>
                  <span class="men-name" >{{ article.get('author').get('username') }}</span>
                  <!--邮箱-->
                  <span class="men-time">
                      <span>
                       <i class="fa fa-envelope fa-lg" aria-hidden="true" ></i>
                      </span>
                      <span>{{article.get('author').get('email') }}</span>
                    </span>
                  <!--邮箱-->
                  </router-link>
                  <span class="men-icon" v-if="!index">New</span>
                </div>
                <!--内容-->
                <div class="men-content">
                  <div class="flow-text" >
                   <!-- <div  v-html="article.get('content')"></div>-->
                    <!--文本组件-->
                          <qsj-editor  :showCounter="false"
                                       :isFocus="false"
                                       :readonly="true"
                                       :minHeight="0.01"
                                       :value="article.get('content')"
                                       :placeholder="placeholder"
                                       :deviceVersions="deviceVersions"
                                       class="flow-editor"
                          >

                          </qsj-editor>
                    <div class="icon" >
                      <span class="icon-classify">{{article.get('category_name')}}</span>
                      <span class="icon-comment">
                         <img src="../../assets/img/ico/praise-icon.svg" width="15px" height="15px"/>
                         {{article.get('like_num')}}
                      </span>
                      <span class="icon-comment">
                        <i class="fa fa-thumbs-o-down" aria-hidden="true" style="height: 15px" width="15px"></i>
                         {{article.get('dislike_num')}}
                      </span>
                      <span class="icon-help">
                         <img src="../../assets/img/flower.png" width="20px" height="20px"/>
                         {{article.get('flower_num')}}
                      </span>
                      <span class="icon-help">
                       <i class="fa fa-car" aria-hidden="true"></i>
                         {{article.get('car_num')}}
                      </span>
                      <span class="icon-help">
                       <i class="fa fa-plane" aria-hidden="true"></i>
                         {{article.get('fly_num')}}
                      </span>
                    </div>
                  </div>
                  <span class="flow-img" v-if="article.get('article_img')">
                      <img  v-lazy="article.get('article_img')"  width="64" height="64" class="img"  />
                  </span>
                  <span class="flow-img" v-else>
                    <i class="fa fa-file-image-o fa-4x" aria-hidden="true" ></i>
                  </span>
                </div>
                <div  class="border-line-bottom"></div>
              </div>
              <div class="flow-process">
                <!--组件-->
                <div class="process" >
                 文章主题： {{article.get('title')}}
                </div>

              </div>

            </div>
          </div>
          </router-link>
          <!--时间轴结束-->
        </div>
      </div>
    </div>


</template>

<script>
import { mapState } from 'vuex';
import Func from '../../assets/js/common.js'
import qsjEditor from '@/components/qsjEditor';
import  BScroll from 'better-scroll'

export default {

  name: 'List',

  data () {
    return {
      title: '',
      articles: [],
      placeholder:'',
      deviceVersions:'pc'
    };
  },
  created(){
      this.match();
  },
  watch: {
    ['$route.query']() {
      console.log('re render');
      this.articles = [];
      this.match();
    }
  },
  computed: mapState(['user']),
  methods: {
    match(){
      let flag = this.$route.query.type || this.$route.query.cid ;
      this.$Progress.start();
      switch(flag){
        case 'me':
          this.getMyArticles();
          break;
        case 'all':
          this.getAllArticles();
          break;
        default:
          this.getCategoryArticle(flag);
      }
    },
    query(){
      let q = new this.$api.SDK.Query('Article');
     /* q.include('category');*/
      q.include('author');
     // 新创建的在前面
      q.descending('createdAt');
      return q;
    },
    getCategoryObj(id){
      return this.$api.SDK.Object.createWithoutData('Category', id);
    },
    setArticles(q){
      q.find().then((articles) => {
          this.articles = articles;
          this.$Progress.finish();
      }).catch(this.fail);
    },
    fail(error){
      this.$message.error(error);
      this.$Progress.fail();
    },
    getAllArticles(){
      this.title = "所有博文";
      const q = this.query();
      this.setArticles(q);
    },
    getMyArticles(){
      this.title = "我的博文";
      const q = this.query();
      q.equalTo('author', this.user);
      this.setArticles(q);
    },
    // cid => category_id
    getCategoryArticle(cid){
      let cateObj = this.getCategoryObj(cid);
      const q = this.query();
      q.equalTo('category', cateObj);
      this.setArticles(q);
    }
  },
  filters: {
    formatTime: Func.formatTime,
    isLike(arr, userInfo) {
      if (arr && userInfo) {
        if(arr.length <= 0) {
          return 'icon-xihuan'
        }
        return arr.map(function(item) {
          if (item === userInfo.objectId) {
            return 'icon-xihuan1'
          } else {
            return 'icon-xihuan'
          }
        });
      } else {
        return 'icon-xihuan'
      }
    }
  },
  components:{
    qsjEditor
  }
};
</script>

<style scoped lang="less">
  .home-container{
    margin-top: 20px;
    width: 100%;
    height: 1000px;
    overflow: scroll;
    overflow-x: hidden;
      .flow{
        padding:20px;
        padding-bottom: 0;
        padding-top: 3px;
        .flow-item{
          position: relative;
          width: 100%;
          display: flex;
          justify-content:flex-start ;
          align-items: flex-start;
          /*  background: #0e89c6;*/
          .time-line{
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 100%;
            .cycle{
              border: 8px solid #ffffff;
              border-radius: 100%;
              box-shadow: 0 0 0 1.25px #9d9c9c ;
              -moz-outline-radius: 100%;
              /*   transform: translateY(.3rem);*/
              z-index: 10;
            }
            .line{
              height: 100%;
              border-left: solid 1px #adadad;
              flex-shrink: 0;
              /*  margin-top:calc(100% - .24rem);*/
              margin-left: -1px;


            }

          }
          .flow-right{
            width:90%;
            margin-left: 50px;
            padding-bottom: 48px;
            .flow-time{
              display: flex;
              margin-top: -8px;
              flex-wrap: nowrap;
              font-family: PingFangSC-Regular;
              font-size: 24px;
              color: #999999;
              letter-spacing: 0;
              line-height: 34px;
            }
            .flow-men{
              margin-top:12px ;
              margin-left: 2px;
              background: #FFFFFF;
              border: 1px solid #c4c6ca;
              border-radius: 6px 6px 0 0;
              /*         background: #5bc0de;*/
              padding: 24px;
              padding-top:20px ;
              padding-bottom: 22px;
              .men-info{
                width: 100%;
                display: flex;
                position: relative;
                flex-wrap: nowrap;
                align-items: center;
                flex-direction: row;
                .men-img {
                  display: inline-block;
                  width: 60px;
                  height: 60px;
                  .img{
                    border-radius: 12px;
                  }
                }
                .men-name {
                  margin-left: 16px;
                  font-family: PingFangSC-Regular;
                  font-size: 34px;
                  color: black;
                  letter-spacing: 0;
                }
                .men-time {
                  flex-direction: row;
                  margin-left: 43.3px;
                  font-family: PingFangSC-Regular;
                  font-size: 10px;
                  color: #333333;
                  letter-spacing: 0;
                }
                .men-icon {
                  position: absolute;
                  left: 85%;
                  display: inline-block;
                  height: 34px;
                  width: 83px;
                  text-align: center;
                  vertical-align: middle;
                  line-height: 34px;
                  background: #F54A4B;
                  border-radius: 20px;
                  font-family: PingFangSC-Regular;
                  font-size: .22px;
                  color: #FFFFFF;
                  letter-spacing: 0;
                }
              }
              .men-content{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin-top: 16px;
                .flow-text{
                  width: 478px;
                  margin-right: 20px;
                  .flow-editor{
                    /*   font-family: PingFangSC-Regular;
                       font-size: .34rem;
                       color: #333333;
                       letter-spacing: 0;
                       line-height: .50rem;*/
                  }
                  .icon{
                    display: inline-block;
                    margin-top: 16px;
                    font-family: PingFangSC-Regular;
                    font-size: 20px;
                    color: #B8B8B8;
                    letter-spacing: 0;
                    line-height: 34px;
                    .icon-classify{
                      display:inline-block;

                      height: 34px;
                      text-align: center;
                      vertical-align: middle;
                      align-items: center;
                      line-height: 34px;
                      font-size: 15px;
                      border: 1px solid #B8B8B8;
                      border-radius: 8px;
                    }
                    .icon-comment{
                      margin-left: 17.9px;
                    }
                    .icon-help{
                      margin-left: 17.9px;
                    }
                  }
                }
                .flow-img{
                  margin-right: 24px;
                  display: inline-block;
                  border-radius: 12px;
                  .img{
                    border-radius: 12px;
                  }
                }
              }
              .border-line-bottom::after{
                margin-top: 18px;
                border-bottom: 1px solid #E7E6EC;
              }
              .flow-people{
                margin-top: 41px;
                font-family: PingFangSC-Regular;
                font-size: 26px;
                color: #999999;
                letter-spacing: 0;
              }
            }
            .flow-process{
              padding: 2px 2px.22px;
              padding-top: 0px;
              padding-right: 0px;
              padding-bottom: 0px;
              .process{
                display: flex;
                padding-left: 24px;
                vertical-align: center;
                align-items: center;
                height: 56px;
                background: #f0ece5;
                border: 2px solid #EEEEEE;
                border-radius: 6px 6px 0 0;
                vertical-align: middle;
              }
            }

          }
        }

      }




  }
  .last-line{
    border-left: solid 0 red!important;
  }
  .fa-lg{
    line-height: 10px!important;
  }
</style>
